<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>简易在线HTML编辑器</title>  
<style>  
    * {
        margin: 0;
        padding: 0;
        

    }
    body {
        background-color: rgb(59, 59, 59);
        color: #ccc;
    }
    #editor {  
        width: 48%;  
        height: 300px;  
        float: left;  
        border: 1px solid #ccc;  
        padding: 10px;  
    }  
    #preview {  
        width: 48%;  
        height: 300px;  
        float: right;  
        border: 1px solid #ccc;  
        padding: 10px;  
        overflow-y: auto;  
    }  
    textarea {  
        width: calc(100% - 22px);  
        height: calc(100% - 22px);  
    }  
</style>  
</head>  
<body>  
<h1>简易在线HTML编辑器</h1>  
<div id="editor">  
    <textarea id="codeEditor" placeholder="在这里编写HTML代码..."></textarea>  
</div>  
<div id="preview">  
    <iframe id="previewFrame" frameborder="0"></iframe>  
</div>  
  
<script>  
    document.getElementById('codeEditor').addEventListener('input', function() {  
        const code = this.value;  
        const previewFrame = document.getElementById('previewFrame');  
        previewFrame.contentWindow.document.open();  
        previewFrame.contentWindow.document.write('<!DOCTYPE html><html><head><title>预览</title></head><body>' + code + '</body></html>');  
        previewFrame.contentWindow.document.close();  
    });  
</script>  
</body>  
</html>